<template>
  <textarea ref = "codemirror" v-model = "code"></textarea>
</template>

<script>
import "../../api/codemirror_import"
import {ref} from "vue";
import {markRaw} from "@vue/reactivity";
import CodeMirror from "codemirror";
import {js_beautify} from "js-beautify";

export default {
  name: "CodeJs",
  setup(props, context) {
    console.log(props, context.attrs);
    const code = ref(context.attrs["value"]);
    const fieldName = ref(context.attrs["field-name"]);
    const lang = ref(context.attrs["lang"]);
    const theme = ref(context.attrs["theme"]);
    const boxHeight = ref(context.attrs["boxHeight"]);
    const editor = ref(null);
    return {lang, theme, code, boxHeight, fieldName, editor}
  },
  mounted() {
    let _this = this;
    const completeAfter = (cm, pred) => {
      if (!pred || pred()) {
        setTimeout(function () {
          if (!cm.state.completionActive) {
            cm.showHint({
              completeSingle: false,
            });
          }
        }, 100);
      }
      return CodeMirror.Pass;
    }
    //mode 可在 node_modules\codemirror\mode\meta.js 进行查找
    const cmOptions = {
      mode: _this.lang || "javascript", // 语言模式
      theme: _this.theme || "monokai", // 主题
      lineNumbers: true, // 显示行号
      smartIndent: true, //智能缩进
      indentUnit: 4, // 智能缩进单元长度为 4 个空格
      styleActiveLine: true, // 显示选中行的样式
      matchBrackets: true, //每当光标位于匹配的方括号旁边时，都会使其高亮显示
      autofocus: true,
      showCursorWhenSelecting: true,
      autoRefresh: true,
      autocorrect: true,
      spellcheck: true,
      autoCloseBrackets: true, // 在键入时自动关闭括号和引号
      // eslint-disable-next-line no-undef
      // hint: CodeMirror.hint.javascript,
      hintOptions: {
        completeSingle: false,
      },
      lint: {
        esversion: 6
      },
      extraKeys: {
        // 自动补全的按键事件
        "Ctrl-F": _this.dataFormat,
        ".": completeAfter,
        "Ctrl-Enter": "autocomplete",
        "F11": function (cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
      },
      // 代码折叠
      gutters: [
        "CodeMirror-lint-markers",
        "CodeMirror-linenumbers",
        "CodeMirror-foldgutter",
      ],
      foldGutter: true, // 启用行槽中的代码折叠
      lineWrapping: true
    };
    _this.editor = markRaw(CodeMirror.fromTextArea(_this.$refs.codemirror, cmOptions));
    _this.editor.setSize("auto", _this.boxHeight || "95%");
    _this.editor.on("keyup", (cm, event) => {
      //A-Z 65-90
      //a-z 97-122
      //  alert(event.ctrlKey);
      if (!event.ctrlKey && event.keyCode >= 65 && event.keyCode <= 90) {
        // alert(22);
        cm.showHint({
          completeSingle: false,
        });
      }
    });
    setTimeout(() => {
      _this.editor.refresh();
    }, 100);
  },

  methods: {
    dataFormat: function () {
      const _this = this;
      let val = _this.editor.getValue();
      _this.editor.setValue(js_beautify(val));
      _this.editor.refresh();
    },
  }
}
</script>

<style>
.cm-editor {
  height: 300px;
  border: 1px solid #ddd;
}

.cm-scroller {
  overflow: auto;
}

.CodeMirror pre.CodeMirror-line {
  font-size: 16px;
  font-family: 微软雅黑 Arial;
}

.CodeMirror-hints {
  z-index: 3000 !important;
}

.CodeMirror-lint-tooltip {
  z-index: 3000 !important;
}
</style>
